<template>
  <a-layout class="layout">
    <!-- 头部 -->
    <a-layout-header
      :style="{ background: headerBackGorund, color: headerColor }"
    >
      <a-row type="flex" class="layout-header">
        <a-col class="header-left">
          <a href="/" class="router-link-active">
            <img src="@/assets/logo.png" alt="logo" />
            <h1 v-if="!collapsed" :style="{ color: headerColor }">
              {{ title }}
            </h1>
          </a>
        </a-col>
        <a-col flex="1 1 0%" class="header-content">
          <my-menu mode="horizontal"></my-menu>
        </a-col>
        <a-col class="header-right">
          <a-dropdown placement="bottomRight" :style="{ color: headerColor }">
            <a @click.prevent>
              <UserOutlined />
              {{ username }}
            </a>
            <template #overlay>
              <a-menu @click="rightMenuClick">
                <a-menu-item key="UpdatePwd">
                  <template #icon>
                    <EditOutlined />
                  </template>
                  修改密码
                </a-menu-item>
                <a-menu-item key="Setting">
                  <template #icon>
                    <SettingOutlined />
                  </template>
                  系统设置
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="Logout">
                  <template #icon>
                    <LogoutOutlined />
                  </template>
                  退出
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-col>
      </a-row>
    </a-layout-header>
    <!-- 中间 -->
    <a-layout-content class="layout-content">
      <router-view></router-view>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import MyMenu from './components/MyMenu'
  import {
    UserOutlined,
    EditOutlined,
    SettingOutlined,
    LogoutOutlined,
  } from '@ant-design/icons-vue'
  export default {
    name: 'TopMenuLayout',
    components: {
      MyMenu,
      UserOutlined,
      EditOutlined,
      SettingOutlined,
      LogoutOutlined,
    },
    data() {
      return {
        title: process.env.VUE_APP_TITLE,
        collapsed: false, //是否收缩
        collapsedWidth: 50, //缩进宽度
      }
    },
    // 计算属性
    computed: {
      ...mapGetters({
        themeStyle: 'user/themeStyle',
        username: 'user/username',
      }),
      // 头部背景颜色
      headerBackGorund() {
        return this.themeStyle == '1' ? '#fff' : '#000'
      },
      headerColor() {
        return this.themeStyle == '1' ? '#000' : '#fff'
      },
    },
    // 监听事件
    watch: {},
    // 页面渲染前
    created() {},
    // 页面渲染后
    mounted() {},
    // 方法
    methods: {
      ...mapActions({
        logout: 'user/logout',
      }),
      triggerLayoutCollapsed() {
        this.collapsed = !this.collapsed
      },
      rightMenuClick({ key }) {
        switch (key) {
          case 'Setting':
            // 显示系统设置抽屉
            this.$emit('showSettingDrawer')
            break
          case 'Logout':
            // 登出
            this.logout()
            break
          default:
            break
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  @header-height: 48px;
  .ant-layout {
    height: 100%;
    // 头部
    .ant-layout-header {
      height: @header-height;
      padding: 0;
      .layout-header {
        height: @header-height;
        line-height: @header-height;
        padding: 0 16px;
        box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
        .header-left {
          height: @header-height;
          display: flex;
          align-items: center;
          padding: 16px 16px;
          cursor: pointer;
          a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            line-height: 32px;
            img {
              display: inline-block;
              height: 20px;
              vertical-align: middle;
            }
            h1 {
              margin: 0 0 0 12px;
              overflow: hidden;
              font-weight: 600;
              font-size: 18px;
              line-height: 32px;
              animation: fade-in;
              animation-duration: 0.2s;
            }
          }
        }
        .header-content {
          min-width: 0;
          height: @header-height;
        }
      }
    }
    // 中间
    .layout-content {
      box-shadow: 0 2px 8px 0 rgba(29, 35, 41, 0.05);
      background: rgb(250 250 250);
      overflow: auto;
    }
  }
</style>
